<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        * 删除的响应函数
        * */
        function delA(){

            //点击超链接以后删除所在行
            //这里我们点击那个超链接，this就是谁
            //获取tr
            var tr = this.parentNode.parentNode;
            //删除时弹出提示框
            //获取删除员工的名字
            //var name = tr.getElementsByTagName("td")[0].innerHTML;
            var name = tr.children[0].innerHTML;

            var flag = confirm("确认删除"+name+"吗？");
            //confirm会有一个带有确认取消的提示窗口
            //用户点击确认返回true

            //删除tr
            if (flag){
                tr.parentNode.removeChild(tr);
            }


            /*
                            *点击超链接以后超链接会跳转，为默认行为
                            * 此时不需要默认行为，
                            * 在函数最后return false取消默认行为
                            * */

            return false;
        };


        window.onload = function (){

            /*
            * 点击超链接以后，删除一个员工信息
            * */
            //获取所有超链接
            var allA = document.getElementsByTagName("a");

            for(var i = 0; i < allA.length;i++){
                allA[i].onclick = delA;

            }

            /*
            * 添加员工的功能
            *   点击按钮以后，添加在表格中
            *
            * */

            //为提交按钮绑定单击响应函数
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function (){
                //获取员工添加的员工信息

                //获取员工的名字
                var name = document.getElementById("empName").value;
                //获取员工的邮箱
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                //需要将获取到的信息保存在tr中
                //创建一个tr

                // //创建四个td
                // var nameTd = document.createElement("td");
                // var emailTd = document.createElement("td");
                // var salaryTd = document.createElement("td");
                // var aTd = document.createElement("td");
                //
                // //创建一个a元素
                // var a = document.createElement("a");
                //
                // //创建文本节点
                // var nameText = document.createTextNode(name);
                // var emailText = document.createTextNode(email);
                // var salaryText = document.createTextNode(salary);
                // var delText = document.createTextNode("Delete");
                //
                // //将文本添加到td中
                // nameTd.appendChild(nameText);
                // emailTd.appendChild(emailText);
                // salaryTd.appendChild(salaryText);
                //
                // //向a中添加文本
                // a.appendChild(delText);
                // //将a添加到td中
                // aTd.appendChild(a);
                //
                // //将td添加到tr中
                // tr.appendChild(nameTd);
                // tr.appendChild(emailTd);
                // tr.appendChild(salaryTd);
                // tr.appendChild(aTd);
                //
                // //向a添加href属性
                // a.href = "javascript:;";
                //
                //
                // //为新添加的a绑定删除函数
                // a.onclick = delA;
                var tr = document.createElement("tr");

                tr.innerHTML = "<td>+name+</td>"+
                                "<td>+email+</td>"+
                                "<td>+salary+</td>"+
                                "<td><a href='javascript:;'>Delete</a></td>";

                //获取刚才添加的，为其绑定单击响应函数
                var a = tr.getElementsByTagName("a")[0];
                a.onclick = delA;

                //获取table
                var employeeTable = document.getElementById("employeeTable");

                //获取employeeTable中的tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];

                tbody.appendChild(tr);


            }


        };
    </script>
</head>
<body>

</body>
</html>